<template>
  <div class="tab-bar">
      <div class="item">
           <router-link to="/home" class="nav_item" active-class="nav_color">
           <van-icon name="wap-home-o" class="icon" />
           <span>首页</span>
           </router-link>
      </div>
      <div class="item">
           <router-link to="/cart" class="nav_item" active-class="nav_color">
           <van-icon name="shopping-cart-o" class="icon" />
            <span>购物车</span>
           </router-link>
      </div>
      <div class="item">
           <router-link to="order" class="nav_item" active-class="nav_color">
               <van-icon name="label-o" class="icon"  />
               <span>订单</span>
           </router-link>
      </div>
      <div class="item">
           <router-link to="me" class="nav_item" active-class="nav_color">
               <van-icon name="user-circle-o"  class="icon" />
               <span>我的</span>
           </router-link>
      </div>
  </div>
</template>

<script>
export default {
   name:'TabBar'
}
</script>

<style lang="less" scoped>
.tab-bar{
    display: flex;
    width: 100%;
    height: 50px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    // background-color: pink;
    box-sizing: border-box;
    border-top: 1px solid #eee;
    background-color: #fff;
    .item{
        flex: 1;
        .nav_item{
          display: flex;
          height: 100%;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
          .icon{
              font-size: 25px;
          }
          span{
              font-size: 16px;
          }
        }
       .nav_color{
         color: #ffc400;
       }
    }
}
</style>